<template>
  <div class="container">
    <h3>vue+openlayers: 绘制点、线、圆、多边形</h3>
    <div>
      <el-select v-model="type">
        <el-option v-for="item in tools" :key="item.value" :value="item.value" :label="item.label" />
      </el-select>
    </div>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import LayerVector from 'ol/layer/Vector'
import SourceVector from 'ol/source/Vector'
import Draw from 'ol/interaction/Draw'
import Fill from 'ol/style/Fill'
import Stroke from 'ol/style/Stroke'
import Style from 'ol/style/Style'
// import Circle from 'ol/geom/Circle'
import {Circle} from 'ol/style'
export default {
  data() {
    return {
      type: 'Point',
      tools: [
        { value: 'Point', label: '点' },
        { value: 'LineString', label: '线' },
        { value: 'Polygon', label: '多边形' },
        { value: 'Circle', label: '圆' },
        { value: 'None', label: '无' }
      ],
      map: null,
      draw: null,
      source: new SourceVector({
        wrapX: false // 不允许x轴方向重复
      })
    }
  },
  watch: {
    type(newVal) {
      this.addInteraction()
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let raster = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })

      let vector = new LayerVector({
        source: this.source, // 矢量数据源
        style: new Style({
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: '#ffcc33'
            })
          })
        })
      })

      this.map = new Map({
        target: 'vue-openlayers',
        layers: [raster, vector],
        view: new View({
          projection: 'EPSG:4326',
          center: [116.397411, 39.909186],
          zoom: 10
        })
      })
      this.addInteraction()
    },

    // 添加交互
    addInteraction() {
      if (this.draw) {
        this.map.removeInteraction(this.draw) // 移除上一次绘制的绘制对象
      }
      if (this.type !== 'None') {
        this.draw = new Draw({
          source: this.source,
          type: this.type,
          // Draw执行时采用的样式
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new Stroke({
              color: '#ffcc33',
              width: 2
            }),
            image: new Circle({
              radius: 5,
              fill: new Fill({
                color: '#ffcc33'
              })
            })
          })
        })
        this.map.addInteraction(this.draw)
        // 获取绘制的要素的坐标
        this.draw.on('drawend', e => {
          if(this.type === 'Circle') {
            let center = e.feature.getGeometry().getCenter()  // 获取圆心
            let radius = e.feature.getGeometry().getRadius() // 获取半径
            console.log(center, radius)
          } else {
            console.log(e.feature.getGeometry().getCoordinates())
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
